<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2025/5/9
  Time: 11:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>财务管理系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }

        .container {
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            border-radius: 5px;
            margin-top: 20px;
        }

        h1 {
            text-align: center;
            color: #333;
        }

        .tabs {
            display: flex;
            margin-bottom: 20px;
            border-bottom: 1px solid #ddd;
        }

        .tab {
            padding: 10px 20px;
            cursor: pointer;
            background-color: #f1f1f1;
            border: 1px solid #ddd;
            border-bottom: none;
            border-radius: 5px 5px 0 0;
            margin-right: 5px;
        }

        .tab.active {
            background-color: white;
            border-bottom: 1px solid white;
            margin-bottom: -1px;
            font-weight: bold;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        .toolbar {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
        }

        .data-table th, .data-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        .data-table th {
            background-color: #f2f2f2;
        }

        .data-table tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        .btn-add, .btn-edit, .btn-delete, .btn-submit {
            padding: 5px 10px;
            cursor: pointer;
            border: none;
            border-radius: 3px;
        }

        .btn-add {
            background-color: #4CAF50;
            color: white;
        }

        .btn-edit {
            background-color: #2196F3;
            color: white;
        }

        .btn-delete {
            background-color: #f44336;
            color: white;
        }

        .btn-submit {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
        }

        .income {
            color: green;
        }

        .expense {
            color: red;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 10% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 50%;
            max-width: 600px;
            border-radius: 5px;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .form-group input, .form-group select, .form-group textarea {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #ddd;
            border-radius: 3px;
        }

        .pagination {
            margin-top: 20px;
            text-align: center;
        }

        .pagination button {
            margin: 0 5px;
            padding: 5px 10px;
            background-color: #f1f1f1;
            border: 1px solid #ddd;
            border-radius: 3px;
            cursor: pointer;
        }

        .pagination button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .current-page {
            padding: 5px 10px;
            background-color: #4CAF50;
            color: white;
            border-radius: 3px;
        }

        .filters {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .filters select, .filters input {
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 3px;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>财务管理系统</h1>

    <div class="tabs">
        <div class="tab active" onclick="switchTab('transactions')">交易记录</div>
    </div>
    <!-- 交易记录 -->
    <div id="transactions" class="tab-content active">
        <div class="toolbar">
            <button class="btn-add" onclick="openAddModal('transaction')">新增交易</button>
            <div class="filters">
                <select id="filterType">
                    <option value="">所有类型</option>
                    <option value="收入">收入</option>
                    <option value="支出">支出</option>
                </select>
                <select id="filterAccount">
                    <option value="">所有账户</option>
                    <option value="1">现金</option>
                    <option value="2">工商银行</option>
                    <option value="3">支付宝</option>
                </select>
                <select id="filterCategory">
                    <option value="">所有分类</option>
                    <option value="1">工资</option>
                    <option value="2">餐饮</option>
                    <option value="3">奖金</option>
                    <option value="4">购物</option>
                </select>
                <input type="date" id="filterDateFrom" placeholder="开始日期">
                <input type="date" id="filterDateTo" placeholder="结束日期">
                <button onclick="applyFilters()">筛选</button>
            </div>
        </div>

        <table class="data-table">
            <thead>
            <tr>
                <th>ID</th>
                <th>账户</th>
                <th>分类</th>
                <th>金额</th>
                <th>类型</th>
                <th>描述</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td>现金</td>
                <td>工资</td>
                <td class="income">+3000.00</td>
                <td>收入</td>
                <td>月工资</td>
                <td>
                    <button class="btn-edit" onclick="editItem('transaction', 1)">编辑</button>
                    <button class="btn-delete" onclick="deleteItem('transaction', 1)">删除</button>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>现金</td>
                <td>餐饮</td>
                <td class="expense">-50.00</td>
                <td>支出</td>
                <td>午餐</td>
                <td>
                    <button class="btn-edit" onclick="editItem('transaction', 2)">编辑</button>
                    <button class="btn-delete" onclick="deleteItem('transaction', 2)">删除</button>
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>支付宝</td>
                <td>奖金</td>
                <td class="income">+1000.00</td>
                <td>收入</td>
                <td>季度奖金</td>
                <td>
                    <button class="btn-edit" onclick="editItem('transaction', 3)">编辑</button>
                    <button class="btn-delete" onclick="deleteItem('transaction', 3)">删除</button>
                </td>
            </tr>
            <tr>
                <td>4</td>
                <td>支付宝</td>
                <td>购物</td>
                <td class="expense">-200.00</td>
                <td>支出</td>
                <td>网上购物</td>
                <td>
                    <button class="btn-edit" onclick="editItem('transaction', 4)">编辑</button>
                    <button class="btn-delete" onclick="deleteItem('transaction', 4)">删除</button>
                </td>
            </tr>
            </tbody>
        </table>

        <div class="pagination">
            <button disabled>上一页</button>
            <span class="current-page">1</span>
            <button>下一页</button>
        </div>
    </div>
</div>

<!-- 通用模态框 -->
<div id="modal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal()">&times;</span>
        <h3 id="modalTitle">添加</h3>
        <form id="modalForm" onsubmit="handleSubmit(event)">
            <input type="hidden" id="itemId">
            <input type="hidden" id="itemType">


            <!-- 交易表单 -->
            <div id="transactionForm" class="form-content" style="display:none;">
                <div class="form-group">
                    <label>账户</label>
                    <select id="transactionAccount" required>
                        <option value="1">现金</option>
                        <option value="2">工商银行</option>
                        <option value="3">支付宝</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>分类</label>
                    <select id="transactionCategory" required>
                        <option value="1">工资</option>
                        <option value="2">餐饮</option>
                        <option value="3">奖金</option>
                        <option value="4">购物</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>金额</label>
                    <input type="number" id="transactionAmount" step="0.01" required>
                </div>
                <div class="form-group">
                    <label>类型</label>
                    <select id="transactionType" required>
                        <option value="收入">收入</option>
                        <option value="支出">支出</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>日期</label>
                    <input type="datetime-local" id="transactionDate" required>
                </div>
                <div class="form-group">
                    <label>描述</label>
                    <textarea id="transactionDescription"></textarea>
                </div>
            </div>

            <button type="submit" class="btn-submit">保存</button>
        </form>
    </div>
</div>

<script>
    // 打开添加模态框
    function openAddModal(type) {
        document.getElementById('modalTitle').textContent = `添加${getTypeName(type)}`;
        document.getElementById('itemId').value = '';
        document.getElementById('itemType').value = type;

        // 隐藏所有表单
        document.querySelectorAll('.form-content').forEach(form => {
            form.style.display = 'none';
        });

        // 显示对应的表单
        document.getElementById(`${type}Form`).style.display = 'block';

        // 重置表单
        document.getElementById('modalForm').reset();

        // 显示模态框
        document.getElementById('modal').style.display = 'block';
    }

    // 编辑项目
    function editItem(type, id) {
        document.getElementById('modalTitle').textContent = `编辑${getTypeName(type)}`;
        document.getElementById('itemId').value = id;
        document.getElementById('itemType').value = type;

        // 隐藏所有表单
        document.querySelectorAll('.form-content').forEach(form => {
            form.style.display = 'none';
        });

        // 显示对应的表单
        document.getElementById(`${type}Form`).style.display = 'block';

        // 根据类型和ID填充表单数据
        fillFormData(type, id);

        // 显示模态框
        document.getElementById('modal').style.display = 'block';
    }

    // 填充表单数据
    function fillFormData(type, id) {
        // 这里应该是从服务器获取数据，这里用模拟数据
        if(type === 'account') {
            if(id == 1) {
                document.getElementById('accountName').value = '现金';
                document.getElementById('accountType').value = 'cash';
                document.getElementById('accountBalance').value = '1000.00';
                document.getElementById('accountCurrency').value = 'CNY';
            } else if(id == 2) {
                document.getElementById('accountName').value = '工商银行';
                document.getElementById('accountType').value = 'bank';
                document.getElementById('accountBalance').value = '5000.00';
                document.getElementById('accountCurrency').value = 'CNY';
            } else if(id == 3) {
                document.getElementById('accountName').value = '支付宝';
                document.getElementById('accountType').value = 'digital';
                document.getElementById('accountBalance').value = '2000.00';
                document.getElementById('accountCurrency').value = 'CNY';
            }
        } else if(type === 'category') {
            if(id == 1) {
                document.getElementById('categoryName').value = '工资';
                document.getElementById('categoryType').value = '收入';
                document.getElementById('categoryIcon').value = 'salary_icon';
            } else if(id == 2) {
                document.getElementById('categoryName').value = '餐饮';
                document.getElementById('categoryType').value = '支出';
                document.getElementById('categoryIcon').value = 'food_icon';
            } else if(id == 3) {
                document.getElementById('categoryName').value = '奖金';
                document.getElementById('categoryType').value = '收入';
                document.getElementById('categoryIcon').value = 'bonus_icon';
            } else if(id == 4) {
                document.getElementById('categoryName').value = '购物';
                document.getElementById('categoryType').value = '支出';
                document.getElementById('categoryIcon').value = 'shopping_icon';
            }
        } else if(type === 'transaction') {
            if(id == 1) {
                document.getElementById('transactionAccount').value = '1';
                document.getElementById('transactionCategory').value = '1';
                document.getElementById('transactionAmount').value = '3000.00';
                document.getElementById('transactionType').value = '收入';
                document.getElementById('transactionDescription').value = '月工资';
            } else if(id == 2) {
                document.getElementById('transactionAccount').value = '1';
                document.getElementById('transactionCategory').value = '2';
                document.getElementById('transactionAmount').value = '50.00';
                document.getElementById('transactionType').value = '支出';
                document.getElementById('transactionDescription').value = '午餐';
            } else if(id == 3) {
                document.getElementById('transactionAccount').value = '3';
                document.getElementById('transactionCategory').value = '3';
                document.getElementById('transactionAmount').value = '1000.00';
                document.getElementById('transactionType').value = '收入';
                document.getElementById('transactionDescription').value = '季度奖金';
            } else if(id == 4) {
                document.getElementById('transactionAccount').value = '3';
                document.getElementById('transactionCategory').value = '4';
                document.getElementById('transactionAmount').value = '200.00';
                document.getElementById('transactionType').value = '支出';
                document.getElementById('transactionDescription').value = '网上购物';
            }
        }
    }

    // 删除项目
    function deleteItem(type, id) {
        if(confirm(`确定要删除这个${getTypeName(type)}吗？`)) {
            console.log(`删除${type}:`, id);
            // 这里应该发送删除请求到服务器
            alert('删除成功！');
            // 实际应用中应该刷新数据
        }
    }

    // 关闭模态框
    function closeModal() {
        document.getElementById('modal').style.display = 'none';
    }

    // 表单提交处理
    function handleSubmit(event) {
        event.preventDefault();

        const type = document.getElementById('itemType').value;
        const id = document.getElementById('itemId').value;
        const isEdit = id !== '';

        let formData = {};

        if(type === 'account') {
            formData = {
                id: id || null,
                name: document.getElementById('accountName').value,
                type: document.getElementById('accountType').value,
                balance: document.getElementById('accountBalance').value,
                currency: document.getElementById('accountCurrency').value
            };
        } else if(type === 'category') {
            formData = {
                id: id || null,
                name: document.getElementById('categoryName').value,
                type: document.getElementById('categoryType').value,
                icon: document.getElementById('categoryIcon').value
            };
        } else if(type === 'transaction') {
            formData = {
                id: id || null,
                account_id: document.getElementById('transactionAccount').value,
                category_id: document.getElementById('transactionCategory').value,
                amount: document.getElementById('transactionAmount').value,
                type: document.getElementById('transactionType').value,
                description: document.getElementById('transactionDescription').value,
                date: document.getElementById('transactionDate').value
            };
        }

        console.log(`${isEdit ? '更新' : '添加'}${type}:`, formData);
        // 这里应该发送数据到服务器

        alert(`${isEdit ? '更新' : '添加'}成功！`);
        closeModal();
        // 实际应用中应该刷新数据
    }

    // 应用筛选条件
    function applyFilters() {
        const type = document.getElementById('filterType').value;
        const account = document.getElementById('filterAccount').value;
        const category = document.getElementById('filterCategory').value;
        const dateFrom = document.getElementById('filterDateFrom').value;
        const dateTo = document.getElementById('filterDateTo').value;

        console.log('应用筛选条件:', {type, account, category, dateFrom, dateTo});
        // 这里应该发送筛选请求到服务器并刷新表格数据
    }

    // 获取类型名称
    function getTypeName(type) {
        const names = {
            'account': '账户',
            'category': '分类',
            'transaction': '交易'
        };
        return names[type] || '';
    }

    // 点击模态框外部关闭
    window.onclick = function(event) {
        const modal = document.getElementById('modal');
        if(event.target == modal) {
            closeModal();
        }
    }
</script>
</body>
</html>